<template>
  <!-- 图文资讯列表页 -->
  <div class="newlist">
    <van-nav-bar
      title="新闻资讯列表页"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 列表 -->
    <div class="content">
      <div
        class="list"
        v-for="item in newList"
        :key="item.id"
        @click="$router.push(`/home/newDetail/${item.id}`)"
      >
        <div class="left">
          <van-image width="70%" height="70%" :src="item.img_url" />
        </div>
        <div class="rigth">
          <div class="title">
            <span>{{ item.title }}</span>
          </div>
          <div class="info">
            <div class="time">
              发布时间：<span>{{ item.add_time }}</span>
            </div>
            <div class="click">
              点击：<span>{{ item.click }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewList } from "@/apis/newList.js";
export default {
  data() {
    return {
      newList: [],
    };
  },
  async created() {
    // 获取列表页面数据
    this.newList = (await getNewList()).data.message;
    // console.log("this.newList", this.newList);
    // 发布时间处理：分割后截取
    this.newList = this.newList.map((item) => {
      return {
        ...item,
        add_time: item.add_time.split("T")[0],
      };
    });
  },
};
</script>

<style lang="less" scoped>
.newlist {
  /deep/.van-nav-bar__content {
    background-color: #f7f7f7;
  }
  .list {
    display: flex;
    border-bottom: 1px solid #e3e3e5;
    .left {
      width: 80px;
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .rigth {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .title {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span {
          color: #9d9d9d;
        }
      }
      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #5bbaff;
        .click {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
